/**
 * @file: panel 标题
 * @author: Lengxx
 * @date: 2024-06-18
 */
<template>
  <div :class="classnames">
    {{  props.title  }}
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  size: {
    type: Number,
    default: 18
  },
  classnames: {
    type: String,
    default: ''
  }
});

const classnames = ref(getClassnames());

function getClassnames() {
  return `panel-title before:bg-[#0960bd] text-[${props.size}px] ${props.classnames}`
}

</script>

<style lang="less" scoped>

.panel-title {
  position: relative;
  padding-left: 20px;
}

.panel-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
}

</style>
